<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .tabs {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        .tab.active {
            border-bottom: 2px solid #007BFF;
        }
        .content {
            display: none;
        }
        .content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="tabs">
            <div class="tab active" data-tab="tab1">Tab 1</div>
            <div class="tab" data-tab="tab2">Tab 2</div>
            <div class="tab" data-tab="tab3">Tab 3</div>
        </div>
        <div class="content active" id="tab1-content"></div>
        <div class="content" id="tab2-content"></div>
        <div class="content" id="tab3-content"></div>
    </div>

    <script>
        // JavaScript 代码
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.tab');
            const contents = document.querySelectorAll('.content');

            // 切换选项卡的函数
            function switchTab(tabId) {
                tabs.forEach(tab => tab.classList.remove('active'));
                contents.forEach(content => content.classList.remove('active'));

                const selectedTab = document.querySelector(`.tab[data-tab="${tabId}"]`);
                const selectedContent = document.querySelector(`#${tabId}-content`);

                selectedTab.classList.add('active');
                selectedContent.classList.add('active');

                // 从 localStorage 中读取数据
                const cachedData = localStorage.getItem(tabId);
                if (cachedData) {
                    selectedContent.innerHTML = cachedData;
                } else {
                    fetchDataAndCache(tabId, selectedContent);
                }
            }

            // 发送请求获取数据并缓存
            function fetchDataAndCache(tabId, contentElement) {
                fetch(``) // 替换为实际的API端点
                    .then(response => response.text())
                    .then(data => {
                        contentElement.innerHTML = data;
                        localStorage.setItem(tabId, data);
                    })
                    .catch(error => console.error('Error fetching data:', error));
            }

            // 初始化时显示第一个选项卡的内容
            switchTab('tab1');

            // 绑定选项卡点击事件
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    switchTab(tabId);
                });
            });
        });
    </script>
</body>
</html>